<template>
  <div>
    <div v-if="depth === 0">
      <el-form-item
        label="用户头像："
        prop="open"
      >
        <el-avatar style="float: left;" :size="40" :src="dynamicContent.avatar">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
        </el-avatar>
      </el-form-item>
      <el-form-item
        label="用户名："
        prop="open"
      >
        <div style="display: inline-block">{{ dynamicContent.nickname }}</div>
      </el-form-item>
      <el-form-item
        label="用户ID："
        prop="open"
      >
        <template>
          <TooptipsCom :user-id="dynamicContent.userId" />
        </template>
      </el-form-item>
      <el-form-item
        label="动态内容："
        prop="open"
      >
        <div style="display: inline-block">{{ dynamicContent.content }}</div>
      </el-form-item>
      <el-form-item
        label="动态照片："
        prop="open"
      >
        <div>
          <div
            v-if="dynamicContent.type === 1"
          >
            <ul class="photos-list" style="list-style: none">
              <li
                v-for="img in dynamicContent.imageVos"
                :key="img.url"
                align="center"
                style="display: inline-block; margin-right: 10px;"
              >
                <image-tooltip :image-id="img.url">
                  <img
                    v-if="img.url"
                    slot="img"
                    :src="img.url"
                    width="120"
                    style="cursor:pointer; width: 100px; height: 100px;"
                    title=""
                    @click.prevent="zoomImage(img.url, 'image')"
                  >
                </image-tooltip>
              </li>
            </ul>
          </div>
          <div
            v-if="dynamicContent.type === 2 && dynamicContent.video && dynamicContent.video.videoUrl"
            class="video-wrap"
          >
            <video
              controls
              :src="dynamicContent.video.videoUrl"
              width="100"
              style="cursor:pointer; width: 200px"
              title="点击放大"
              @click="zoomImage(dynamicContent.video.videoUrl, 'video')"
            />
          </div>
        </div>
      </el-form-item>
      <el-button
        size="mini"
        type="primary"
        @click="showComment(null, null)"
      >评论动态</el-button>
    </div>
    <div v-for="(item, index) in list" :key="index" class="list-item">
      <div class="item-name">
        <div class="comment_item">
          <el-avatar style="float: left;" :size="40" :src="item.avatar">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
          </el-avatar>
          <div class="comment_content">
            <span style="padding-bottom: 6px;">
              {{ item.nickname }}
              <template>
                <TooptipsCom :user-id="item.userId" />
              </template>
            </span>
            <span v-if="item.replayUserNickname" style="">回复 {{ item.replayUserNickname }}</span>
            <el-button
              size="mini"
              style="padding: 2px 6px;"
              @click="showComment(item.commentId, item.userId)"
            >回复</el-button>
            <div style="">{{ item.createTimestamp | formatTime }}</div>
            <div style="width: 90%;">{{ item.comment }}</div>
          </div>
        </div>
      </div>
      <div v-if="item.subCommentList" class="children-item">
        <Dynamic :depth="depth+1" :is-more="false" :list="item.subCommentList" :dynamic-content="false" :content-id="contentId"></Dynamic>
      </div>
    </div>
    <el-dialog
      title="添加评论"
      :visible.sync="StatusFormVisible"
      width="50%"
      append-to-body
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="commentItem"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-form-item
          label="评论内容"
          prop="comment"
        >
          <el-input
            v-model="commentItem.comment"
            clearable
            placeholder="请输入评论内容"
          />
        </el-form-item>
        <el-form-item
          label="用户id"
          prop="commentUserId"
        >
          <el-autocomplete
            v-model="commentItem.commentUserId"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入用户id"
            @input="changeRobotUser"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-avatar v-if="userDetail.id" style="float: left;" :size="40" :src="userDetail.avatar">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
        </el-avatar>
        <table v-if="userDetail.id" class="cs-detail-info" style="margin-left: 70px">
          <tr>
            <td>ID：<TooptipsCom :user-id="userDetail.id" /></td>
            <td>性别：{{ userDetail.gender | gender }}</td>
            <td>昵称：{{ userDetail.nickname }}</td>
            <td>地址：{{ userDetail.homePlace }}</td>
            <td>年龄：{{ userDetail.age }}</td>
          </tr>
        </table>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="StatusFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="comment"
        >确认</el-button>
      </div>
    </el-dialog>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
      :type="imageViewType"
    />
    <div v-if="isMore" style="text-align: center; margin-top: 60px; color: dodgerblue;" @click="load()">查看更多</div>
  </div>
</template>
<script>
import {
  dynamicCommentIssue, dynamicGetRobotUserIds,
  deletecomment, getDynamicCommentList
} from '@/api/customSetting'
import { xhrAccountDetail } from '@api/account';
import Dynamic from './dynamic'
import ImageViewer from '@/components/ImageViewer/index'
export default {
  name: 'Dynamic',
  components: { Dynamic, ImageViewer },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    list: Array,
    // eslint-disable-next-line vue/require-default-prop
    contentId: String,
    // eslint-disable-next-line vue/require-default-prop
    isMore: Boolean,
    // eslint-disable-next-line vue/require-default-prop
    dynamicContent: Object,
    // eslint-disable-next-line vue/require-default-prop
    depth: Number
  },
  data() {
    return {
      StatusFormVisible: false,
      commentItem: {
        comment: null,
        replayUserId: null,
        robot: true,
        targetCommentId: null,
        targetContentId: null,
        commentUserId: null
      },
      RobotUsers: [],
      userDetail: {},
      showImage: false,
      imageUrl: '',
      imageViewType: 'image',
      rules: {
        comment: [{ required: true, message: '不能为空' }],
        commentUserId: [{ required: true, message: '不能为空' }]
      }
    }
  },
  methods: {
    getRobotUser() {
      dynamicGetRobotUserIds({ }).then(response => {
        const users = []
        for (const i in response.data) {
          users.push(
            { 'value': response.data[i].toString() },
          )
        }
        this.RobotUsers = users
      })
    },
    changeRobotUser(value) {
      for (const i in this.RobotUsers) {
        if (this.RobotUsers[i].value === value) {
          xhrAccountDetail({
            userId: value
          })
            .then((resp) => {
              this.userDetail = resp.data;
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      }
    },
    showComment(commentId, userId) {
      this.commentItem.targetCommentId = commentId
      this.commentItem.targetContentId = this.contentId
      this.commentItem.replayUserId = userId
      this.StatusFormVisible = true
      this.getRobotUser()
    },
    comment() {
      if (!this.commentItem.comment) {
        this.$message.error('评论不能为空')
        return;
      }
      if (!this.commentItem.commentUserId) {
        this.$message.error('用户id不能为空')
        return;
      }
      let send_status = false
      for (const i in this.RobotUsers) {
        if (this.RobotUsers[i].value === this.commentItem.commentUserId) {
          send_status = true
        }
      }
      if (!send_status) {
        this.$message.error('用户id不存在')
        return;
      }
      dynamicCommentIssue(this.commentItem).then(response => {
        this.$message.success('评论成功')
        getDynamicCommentList({
          'contentId': this.contentId
        }).then(response => {
          // const items = document.getElementsByClassName("list-item")
          // for (const i in items){
          //   items[i].remove()
          // }
          this.list = response.data.commentVoList
          this.$forceUpdate();
          console.log(this.list)
        })
        this.StatusFormVisible = false
      }).catch((err) => {
        this.$message.error(err)
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.RobotUsers;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    deleteComment(commentId, userId) {
      console.log('删除评论')
      const data = {
        commentId: commentId,
        userId: userId
      }
      deletecomment(data).then(response => {
        this.$message.success('删除成功')
      })
    },
    load() {
      const data = {
        contentId: this.contentId,
        cursor: this.list[this.list.length - 1].commentId
      }
      console.log(data)
      getDynamicCommentList(data).then(response => {
        if (response.data.commentVoList.length === 0) {
          this.isMore = false
        } else {
          for (const x in response.data.commentVoList) {
            this.list.push(response.data.commentVoList[x])
          }
        }
      })
    },
    zoomImage(url, type) {
      this.showImage = true
      this.imageUrl = url
      this.imageViewType = type
    }
  }
};
</script>

<style lang="scss">
.comment_content{
  margin-left: 20px;
  display: inline-block;
  width: 70%;
}
.children-item{
  margin-left: 20px;
}
.item-name{
  flow: hidden !important;
}
.comment_item{
  margin-top: 20px;
}
.cs-detail-info {
  td {
    padding: 10px 20px 0 0;
    font-size: 14px;
  }
}
</style>
